<template>
  <div>
    <van-nav-bar left-text="返回" right-text="分享" title="资讯详情" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="share-o" size="18" v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect"
          @click="showShare = true" />
      </template>
    </van-nav-bar>
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

    
    <!-- 内容区域   -->
    <b class="bb">{{bata.consultation_title}}</b>
    
    <p class="pp">发布者：{{bata.username}}  发布时间：{{moment(bata.consultation_data).format("YYYY-MM-DD HH:mm:ss")}}</p>
    <div class="text" v-html="bata.consultation_text"></div>
  </div>
</template>
<script>
import { createApp, ref ,reactive,onMounted} from 'vue';
import { showPopup, showToast, ActionSheet, Field, CellGroup, Button } from 'vant';
import httpApi from '@/http';
import { useRoute } from 'vue-router';
import moment from 'moment';
export default {
  setup() {
    
    const app = createApp();
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    const onClickLeft = () => history.back();
    console.log(history)
    const showShare = ref(false);
    const onSelect = (option) => {
      showToast(option.name);
      showShare.value = false;
    };
    const options = [
      { name: '微信', icon: 'wechat' },
      { name: '微博', icon: 'weibo' },
      { name: '复制链接', icon: 'link' },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', icon: 'qrcode' },
    ];
    const bata = ref({});
   
    const route = useRoute()
    const type = route.params.id
    console.log(type)
    onMounted(() => {
      httpApi.liveApi.queryByconsId({ page:1,pagesize:10 ,consultation_id:type}).then((res) => {
        // console.log("加载详情：", res);
        bata.value=res.data.data.result[0]
        console.log('1111',res.data.data.result)
        console.log(bata.value)
        

      });
    }); 
        
    return {
      options,
      onClickLeft,
      onSelect,
      showShare,
      showPopup,
      show,
      ActionSheet,
      Field,
      CellGroup,
      Button,
      bata,
      route,
      useRoute,
      moment

    };
  },
};
</script>
<style lang="scss" scoped>
.content {
  padding: 16px 16px 160px;
}

.pl {
  width: 70%;
  background-color: gainsboro;
  border-radius: 15px;
  position: fixed;
  bottom: 10%;
  z-index: 999;
  text-align: center;
  margin: 0 40px;
  height: 30px;
  line-height: 30px;
}
.bb{
display: block;
font-size: 18px;
margin:10px 20px;
text-indent:2em;
}
.pp{
font-size: 13px;
color: gray;
margin: 10px 20px;
}
.text{
  margin: 10px 20px;
}
</style>